import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class List extends Component {

    state = {
        users: [],
        isLoading: false
    }

    componentDidMount(){
        PubSub.subscribe('users', (_, data) => {
            //设置
            this.setState({
                users: data.users,
                isLoading: data.isLoading
            })
        })
    }

    render() {
        return (
            <div className="row">
                {
                    this.state.isLoading && <h2>正在努力加载中.....</h2>
                }
                {
                    !this.state.isLoading && this.state.users.length === 0 && <h2>暂无数据</h2>
                }
                {
                    this.state.users.map(item => {
                        return <div  key={item.id} className="card">
                            <a rel="noreferrer" href={item.html_url} target="_blank">
                                <img alt="github" src={item.avatar_url} style={{width: '100px'}} />
                            </a>
                            <p className="card-text">{item.login}</p>
                        </div>
                    })
                }
                
            </div>
        )
    }
}
